<template>
    <view class="charts-box">
        <qiun-data-charts
            :canvas2d="true"
            type="arcbar"
            :opts="opts"
            :chartData="chartOption"
        />
    </view>
</template>

<script>
export default {
    props: {
        val: {
            type: Number,
            default: null
        }
    },
    data() {
        return {
            chartOption: {},
            opts: {
                // 只更新数据不重新渲染图表
                update: true,
                duration: 0,
                animation: false,
                canvasId: '',
                canvas2d: true,
                color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
                padding: undefined,
                title: {
                    name: "80%",
                    fontSize: 14,
                    color: "#2fc25b"
                },
                subtitle: {
                    name: "完工率",
                    fontSize: 12,
                    color: "#666666"
                },
                extra: {
                    arcbar: {
                        type: "circle",
                        width: 12,
                        backgroundColor: "#E9E9E9",
                        startAngle: 1.5,
                        endAngle: 0.25,
                        gap: 2
                    }
                }

            }
        };
    },
    methods: {
        updateChartData() {
            let chartData = {
                series: [
                    {
                        name: "完成率",
                        color: "#2fc25b",
                        data: this.val / 100
                    }
                ]
            };
            this.opts.title.name = `${this.val}%`;
            this.chartOption = JSON.parse(JSON.stringify(chartData));
        }
    },
    watch: {
        val: {
            handler() {
                this.updateChartData();
            },
            deep: true,
            immediate: true
        }
    }
};
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
    width: 100%;
    height: 100%;
}
</style>
